<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jstl/fmt_rt" %> 
<form id="pagerForm" method="post" action="#rel#">
	<input type="hidden" name="pageNum" value="${currentPage }" /> 
	<input id="rodl_npp" type="hidden" name="numPerPage" value="${numPerPage}" /> 
	<input type="hidden" name="orderField" value="${param.orderField}" /> 
	<input type="hidden" name="orderDirection" value="${param.orderDirection}" />
</form>
<div class="pageHeader">
	<form rel="pagerForm" onsubmit="return dwzSearch(this, 'dialog');"	action="orderDetail_list.action" method="post">
		<input type="hidden" name="rcoId" value="${rcoId}">
		<div class="searchBar nowrap">
			<p>
				<label>姓名或流水号:</label>
				<input type="text" name="keyword" value="${keyword}" maxlength="20" />
			</p>
			<p>
				<label>类型：</label>
				<select class="combox" name="rcodType">
					<option value="0">---所有类型---</option>
					<option ${rcodType == '1'?"selected":""} value="1">印刷错误</option>
					<option ${rcodType == '2'?"selected":""} value="2">卡片损坏</option>
					<option ${rcodType == '3'?"selected":""} value="3">卡片丢失</option>
				</select>
			</p>
			<div class="subBar">
				<ul>
					<li>
						<div class="buttonActive"><div class="buttonContent"><button type="submit">检索</button></div></div>
					</li>
				</ul>
			</div>
		</div>
	</form>
</div>


<div class="pageContent">
	<div class="panelBar">
		<ul class="toolBar">
			<li><a class="look" href="orderDetail_list.action?rcoId={order_id}"  rel="orderDetail_list" target="dialog" mask="true"  resizable="false" warn="请选择一条单据" title="绑定集团客户"><span>查看明细</span></a></li>
		</ul>
	</div>
	
	<table width="100%">
		<tr>
			<td width="50%" style="vertical-align: top;">
				<table class="table" width="100%" targetType="dialog" layoutH="120">
					<thead>
						<tr>
							<th align="center">序号</th>
							<th>年级</th>
							<th>班级</th>
							<th>学生流水号</th>
							<th>学生姓名</th>
							<th>类型</th>
							<th>费用</th>
						</tr>
					</thead>
					<tbody>
						<c:forEach items="${recordList}" var="detail" varStatus="status">
						<tr target="detail_id" rel="${detail.rcodId }" onclick="rcodl_changePhoto('${detail.rcodPhotoPath }');">
							<td>${(status.index+1) + (currentPage-1) * numPerPage}</td>
							<td>${detail.graName }</td>
							<td>${detail.clsName }</td>
							<td>${detail.stuNo }</td>
							<td>${detail.stuName }</td>
							<td>${detail.rcodType}</td>
							<td>
								<c:choose>
									<c:when test="${detail.rcodPrice==0 }">
										<span style="color:green;line-height: 21px;">免费</span>
									</c:when>
									<c:otherwise>
										${detail.rcodPrice }
									</c:otherwise>
								</c:choose>
							</td>
						</tr>
						</c:forEach>
					</tbody>
				</table>
			</td>
			<td width="50%" style="background: #cccccc;">
				<div id="imgBox" style="width:500px; height:500px; background:#cccccc">
        			<img id="rcod_card_photo" src="" />
				</div>
			</td>
		</tr>
	</table>
	
	<div class="panelBar">
		
		<div class="pages">
			<span>页次&nbsp;${currentPage }&nbsp;/&nbsp;${pageCount }&nbsp;页，</span>
			<span>显示&nbsp;</span>
			<select class="combox" name="numPerPage"
				onchange="dialogNumPaging(this,'rodl_npp')">
				<option ${numPerPage==10?"selected":"" } value="10">10</option>
				<option ${numPerPage==20?"selected":"" } value="20">20</option>
				<option ${numPerPage==50?"selected":"" } value="50">50</option>
				<option ${numPerPage==100?"selected":"" } value="100">100</option>
			</select>
			<span>&nbsp;条，共${recordCount}条</span>
		</div>
		
		<div class="pagination" 
			targetType="dialog" 
			totalCount="${recordCount}" 
			numPerPage="${numPerPage}" 
			pageNumShown="${pageNumShown}"
			currentPage="${currentPage }">
		</div>
		
	</div>
</div>
<script type="text/javascript">
<!--

/// <summary>  
/// 调整图片大小并居中  
/// </summary>  
/// <remarks>  
/// <param>图片对象</param>  
/// <param>容器最大宽度</param>  
/// <param>容器最大高度</param>  
/// </remarks>  
var adjustImgSize = function(img, boxWidth, boxHeight) {  

    // var imgWidth=img.width();  
    // var imgHeight=img.height();  
    // 上面这种取得img的宽度和高度的做法有点儿bug   
    // src如果由两个大小不一样的图片相互替换时，上面的写法就有问题了，换过之后的图片的宽度和高度始终取得的还是换之前图片的值。  
    // 解决方法：创建一个新的图片类，并将其src属性设上。  
    var tempImg = new Image();          
    tempImg.src = img.attr('src');  
    var imgWidth=tempImg.width;  
    var imgHeight=tempImg.height;  

    //比较imgBox的长宽比与img的长宽比大小  
    if((boxWidth/boxHeight)>=(imgWidth/imgHeight))  
    {  
        //重新设置img的width和height  
        img.width((boxHeight*imgWidth)/imgHeight);  
        img.height(boxHeight);  
        //让图片居中显示  
        var margin=(boxWidth-img.width())/2;  
        img.css("margin-left",margin);  
    }  
    else  
    {  
        //重新设置img的width和height  
        img.width(boxWidth);  
        img.height((boxWidth*imgHeight)/imgWidth);  
        //让图片居中显示  
        var margin=(boxHeight-img.height())/2;  
        img.css("margin-top",margin);  
    }  
};  
  
// 本机能的js事件  
$(function() {  
     // 图像加载完成之后，调整图片大小  
     $('#rcod_card_photo').load(function() {  
         adjustImgSize($(this), $(this).parent().width(), $(this).parent().height());  
     });  
});  

function rcodl_changePhoto(photoPath){
	document.getElementById("rcod_card_photo").src="http://127.0.0.1:8080/PAJX_DMP/CardPhoto/"+photoPath+"?"+Math.random();
}
//-->
</script>
